<template>
    <div class="p-8 ">
        <div class="p-4 border-#e3e3e3 border-solid border-1 color-#00cc99 flex justify-between items-center">
            <div>

                <span>审核状态：</span>
                <span class="color-#ff0000">{{ transformDict('auditStatus', company.examineResult) }}</span>
                <span class="ml-5">实名状态：</span>
                <span class="color-#ff0000">{{ transformDict('realNameFlag', realnameState) }}</span>
                <span class="ml-5">认证来源：</span>
                <span class="color-#ff0000">企业pc</span>
                <span class="ml-5">认证方式：</span>
                <span>证件认证</span>
            </div>
        </div>
        <el-card header="企业基本信息" class="mt-5">
            <el-descriptions :column="3" border>
                <el-descriptions-item align="center" label="企业名称">{{ company.enterpriseName }}</el-descriptions-item>
                <el-descriptions-item align="center" label="统一社会信用代码">{{ company.creditCode }}</el-descriptions-item>
                <el-descriptions-item align="center" label="企业类型">{{ transformDict('enterpriseType',
                    company.enterpriseNature) }}</el-descriptions-item>
                <el-descriptions-item align="center" label="企业所属地">
                    {{ company.provinceName }}/{{ company.cityName }}/{{ company.areaName }}
                </el-descriptions-item>
                <el-descriptions-item align="center" label="经营所在区域">
                    {{ company.corrProvinceSiteName }}/{{ company.corrCitySiteName }}/{{ company.corrAreaSiteName }}
                </el-descriptions-item>
                <el-descriptions-item align="center" label="所属行业">{{ company.industry }}</el-descriptions-item>
                <el-descriptions-item align="center" label="来源">企业PC</el-descriptions-item>
                <el-descriptions-item align="center" label="来源渠道">{{ company.sourceChannel == '2' ? '运营导入' :
                    '自然流量' }}</el-descriptions-item>
                <el-descriptions-item align="center" label="企业标签">{{ company.enterpriseLabel || '无'
                    }}</el-descriptions-item>
                <el-descriptions-item align="center" label="红黑名单">{{ company.redBlackList }}</el-descriptions-item>
                <el-descriptions-item align="center" label="企业法定代表人">{{ company.legal?.name }}</el-descriptions-item>
                <el-descriptions-item align="center" label="法定代表人身份证号码">{{ company.legal?.idCard
                    }}</el-descriptions-item>
                <el-descriptions-item align="center" label="法定代表人手机号码">{{ company.legal?.mobile
                    }}</el-descriptions-item>
                <el-descriptions-item align="center" label="认证状态">{{ company.authenticationFlag == 1 ? '已认证' : '未认证'
                    }}</el-descriptions-item>
                <el-descriptions-item align="center" label="企业实名状态">{{ transformDict('realNameFlag',
                    company.realNameFlag)
                    }}</el-descriptions-item>
                <el-descriptions-item align="center" label="企业实名类型">平台实名</el-descriptions-item>
                <el-descriptions-item align="center" label="企业基本户开户行">{{ transformDict('bank', company.depositBank)
                    }}</el-descriptions-item>
            </el-descriptions>
            <div class="mt-5">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="企业联系人" name="contact">
                        <!-- Content for enterprise contacts will be added here -->
                        <el-table :data="company.contactList" style="width: 100%">
                            <el-table-column prop="roleType" label="联系人类型"
                                :formatter="(row) => transformDict('contactType', row.roleType)"></el-table-column>
                            <el-table-column prop="contactName" label="企业联系人"></el-table-column>
                            <el-table-column prop="contactTell" label="联系人手机号"></el-table-column>
                            <el-table-column prop="mainContact" label="是否主联系人">
                                <template #default="scope">
                                    {{ scope.row.mainContact === 1 ? '是' : '否' }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="影像材料" name="image">
                        <!-- Content for image materials will be added here -->
                        <el-tabs type="card" v-model="tabActive" tab-position="left" class="demo-tabs">
                            <el-tab-pane label="营业执照" name="license">
                                <div class="flex gap-5 h-50">
                                    <el-image style="width: 200px; height: 100%" class="" :src="licenseImg.fileUrl"
                                        fit="cover" alt="营业执照图片" :preview-src-list="[licenseImg.fileUrl]" />

                                    <el-divider direction="vertical" class="h-full" />

                                    <el-descriptions :column="2" border class="w-full h-full flex-1">
                                        <el-descriptions-item align="center" label="企业名称">
                                            {{ company.enterpriseName }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="统一社会信用代码">
                                            {{ company.creditCode }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="注册所在区域">
                                            {{ company.provinceName }}/{{ company.cityName }}/{{ company.areaName }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="经营地址">
                                            {{ company.corrAddress }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" :span="2" label="经营范围">
                                            {{ company.businessScope }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" :span="2" label="营业期限(止)">
                                            {{ company.businessTermType == '1' ? '长期' : '短期' }}
                                            {{ company.businessTermStart }} 至 {{ company.businessTermEnd }}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane v-if="!!company.operator" label="经办人身份证" name="idCard">
                                <div class="flex gap-5 h-55">
                                    <div>
                                        <el-image style="width: 200px; height: 100px" class="block"
                                            :src="agentIdCardFront.fileUrl" fit="cover" alt="身份证正面图片"
                                            :preview-src-list="[agentIdCardFront.fileUrl]" />
                                        <el-image style="width: 200px; height: 100px" class="block mt-3"
                                            :src="agentIdCardBack.fileUrl" fit="cover" alt="身份证反面图片"
                                            :preview-src-list="[agentIdCardBack.fileUrl]" />
                                    </div>

                                    <el-divider direction="vertical" class="h-full" />

                                    <el-descriptions :column="2" border class="w-full h-full flex-1">
                                        <el-descriptions-item align="center" label="证件类型">
                                            居民身份证
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="姓名">
                                            {{ company.operator?.name }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="证件号码">
                                            {{ company.operator?.idCard }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="手机号">
                                            {{ company.operator?.mobile }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="证件期限(止)">
                                            {{ company.operator?.termType == 1 ? '长期' : '短期' }}
                                            {{ company.operator?.cardBeginDate }} 至 {{ company.operator?.cardEndDate }}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="法人身份证" name="legalIdCard">
                                <div class="flex gap-5 h-55">
                                    <div>
                                        <el-image style="width: 200px; height: 100px" class="block"
                                            :src="idCardFront.fileUrl" fit="cover" alt="身份证正面"
                                            :preview-src-list="[idCardFront.fileUrl]" />
                                        <el-image style="width: 200px; height: 100px" class="block mt-3"
                                            :src="idCardBack.fileUrl" fit="cover" alt="身份证反面"
                                            :preview-src-list="[idCardBack.fileUrl]" />
                                    </div>

                                    <el-divider direction="vertical" class="h-full" />


                                    <el-descriptions :column="2" border class="w-full h-full flex-1">
                                        <el-descriptions-item align="center" label="证件类型">
                                            居民身份证
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="姓名">
                                            {{ company.legal?.name }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="证件号码">
                                            {{ company.legal?.idCard }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="手机号">
                                            {{ company.legal?.mobile }}
                                        </el-descriptions-item>
                                        <el-descriptions-item align="center" label="证件期限(止)">
                                            {{ company.legal?.termType == 1 ? '长期' : '短期' }}
                                            {{ company.legal?.cardBeginDate }} 至 {{ company.legal?.cardEndDate }}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="企业授权书" name="authBook">
                                <div class="flex gap-5">
                                    <el-image v-for="(item, index) in shouquanshu" style="width: 100px;" class="block"
                                        :src="item.fileUrl" fit="cover" alt="营业执照图片"
                                        :preview-src-list="shouquanshu.map(f => f.fileUrl)" />
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="行业标签" name="industry">
                    </el-tab-pane> -->
                    <el-tab-pane label="操作记录" name="operation">
                        <!-- Content for operation records will be added here -->
                        <el-table :data="progressList" style="width: 100%">
                            <el-table-column prop="recordTime" label="操作时间"></el-table-column>
                            <el-table-column prop="operator" label="操作人"></el-table-column>
                            <el-table-column prop="progressState" label="操作详情"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>

    </div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
const imageTab = ref('license');
import { useDict, transformDict } from '../../../hooks/dict';
import { listEnterprise, getEnterpriseMore, addEnterpriseProgress, addEnterprise, updateEnterprise, enterpriseProgressList } from "@/api/manage/enterprise"
import { useRouter, useRoute } from 'vue-router';
import { listCase } from "@/api/manage/file"
import { ref } from 'vue';


useDict('realNameFlag', 'auditStatus', 'contactType', 'enterpriseType', 'bank')
const router = useRouter()
const route = useRoute()
const activeTab = ref('contact')

const realnameState = ref("")
const company = reactive({})
const progressList = ref([])
onMounted(() => {

    getEnterpriseMore(route.query.id).then(response => {
        Object.assign(company, response.data)
        realnameState.value = company.realNameFlag
    })

    listCase({ enterpriseId: route.query.id }).then(response => {
        caseList.value = response.rows
    })

    enterpriseProgressList({ enterpriseId: route.query.id }).then(response => {
        progressList.value = response.rows
    })
})

/**
 * 影像资料
 * 营业执照
 */
const tabActive = ref('license')
const caseList = ref([])
// 营业执照
const licenseImg = computed(() => {
    return caseList.value.find(f => f.fileType == '1') || {}
})

// 身份证字面
const idCardFront = computed(() => {
    return caseList.value.find(f => f.fileType == '4') || {}
})
// 身份证徽章页
const idCardBack = computed(() => {
    return caseList.value.find(f => f.fileType == '5') || {}
})
// 身份证字面
const agentIdCardFront = computed(() => {
    return caseList.value.find(f => f.fileType == '2') || {}
})
// 身份证徽章页
const agentIdCardBack = computed(() => {
    return caseList.value.find(f => f.fileType == '3') || {}
})
// 授权书
const shouquanshu = computed(() => {
    return caseList.value.filter(f => f.fileType == '6') || {}
})


</script>
<style scoped lang="scss">
:deep(.el-descriptions__table) {
    height: 100%;
}

:deep(.el-descriptions__body) {
    height: 100%;
}
</style>
